<template>
  <div>
    <h1 class="title-1" v-if="propsRef?.styleType === 1">{{ propsRef?.title }}</h1>
    <h2 class="title-2" v-else-if="propsRef?.styleType === 2">{{ propsRef?.title }}</h2>
    <h2 class="title-3" v-else>{{ propsRef?.title }}</h2>
    <div class="m-content">
      <slot></slot>
      <slot name="table" a="aaa" b="bbb" :tableData="propsRef?.tableData"></slot>
    </div>
    <div class="m-footer">
      <slot name="footer">
        <a-button @click="handleClick">传消息</a-button>
      </slot>
    </div>
  </div>
</template>
<script setup>
  import { onMounted, ref } from 'vue';
  // 定义属性
  const props = defineProps({
    title: {
      type: String,
      required: true,
    },
    styleType: {
      type: Number,
      default: 1,
    },
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
  });
  const propsRef = ref(props);
  // 定义事件
  const emits = defineEmits(['sendMessage', 'register']);
  const handleClick = () => {
    // 传消息给父组件，触发事件
    emits('sendMessage', '您好！', '我是消息:' + propsRef.value?.styleType);
  };
  const methods = {
    show: () => {
      console.log('show');
    },
    setProps(mProps) {
      propsRef.value = {
        ...propsRef.value,
        ...mProps,
      };
    },
    getProps() {
      return propsRef.value;
    },
  };
  onMounted(() => {
    emits('register', methods);
  });
  defineExpose(methods);
</script>
<style lang="less" scoped>
  .title-1 {
    color: #df9090;
    font-size: 48px;
    font-weight: 500;
  }

  .title-2 {
    color: #333;
    font-size: 36px;
    font-weight: 500;
  }

  .title-3 {
    color: #3d2f2f;
    font-size: 24px;
    font-weight: 500;
  }

  .m-content {
    margin-top: 10px;
    border: 1px solid #ccc;
  }

  .m-footer {
    border: 1px solid #333;
  }
</style>
